<template>
    <div class="bankingInformationPage">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center m-l20">
                <label>单位名称</label>
                <el-input  class="m-l10" v-model="form.companyName" placeholder="请输入单位名称"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>开户行</label>
                <el-input  class="m-l10" v-model="form.bankAccountName" placeholder="请输入开户行"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>账户类型</label>
                <el-select class="m-l10" v-model="form.accountType" clearable>
                    <el-option label="基本户" value="基本户"></el-option>
                    <el-option label="一般户" value="一般户"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button @click="toPage" class="button_edit m-r10">
                    查看余额
                </el-button>
                <el-button class="button_edit" @click="onImport">
                    <svg-icon icon-class="project-detail-icon-l-xiazai" class="icon-export m-r5"></svg-icon>
                    导入
                </el-button>
                <el-button class="button_edit" @click="onExport">
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                :indexWidth="'100'"
                :page="page"
                :height="550"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
        >
            <template #accountPurpose="scope">
                <span style="cursor: pointer;color: #fc7037;" @click="accountPurposeClick(scope.row)">{{scope.row.accountPurpose}}</span>
            </template>
        </public-table>
    </div>

    <public-dialog
            title="编辑账户用途"
            width="30%"
            v-model:visible="visible"
            confirm-button-title="确认"
            :confirm-disabled="isLoading"
            @onConfirm="onConfirm"
    >
        <el-form v-loading="isLoading" element-loading-text="表单数据提交中..." ref="formRef" :model="accountPurposeForm" :rules="rules" class="m-l20 m-r20">
            <el-form-item label="账户用途" prop="accountPurpose">
              <el-input v-model="accountPurposeForm.accountPurpose" placeholder="请输入账户用途"></el-input>
            </el-form-item>
        </el-form>
    </public-dialog>

    <import-file-popup
        title="导入银行账户信息表"
        :is-tip="true"
        ref="importFilePopupRef"
        :interface-config="{fileName:'businessFinance',apiPath:'CBS.importBank'}"
        :template-config="{fileName:'businessFinance',apiPath:'CBS.downloadMB',param:{type:0},templateName:'银行账户信息表模版'}"
        @on-success="onQuery"
    />
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider,
    ElForm, ElFormItem, ElMessage
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {bankManagementApi, CBS, companyApi} from "@/api/businessFinance";
import {useRouter} from "vue-router";
import PublicDialog from "@/components/PublicDialog.vue";
import importFilePopup from "@/components/importFilePopup.vue";
import ImportFilePopup from "@/components/importFilePopup.vue";

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.getBankCompany',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.getBankCompanyLeadingOut',
    tableName:'银行账户信息表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    companyName:'',
    bankAccountName:'',
    accountType: ''
}

tableOption.value = [
    { label: "银行账号 ", prop: "bankAccountId", minWidth: 150 },
    { label: "账号名称", prop: "accountName", minWidth: 120 },
    { label: "开户行", prop: "bankAccountName", minWidth: 120 },
    { label: "单位名称", prop: "companyName", minWidth: 120 },
    { label: "开户地", prop: "address", minWidth: 120 },
    { label: "银行类型", prop: "bankName", minWidth: 120 },
    { label: "账户用途", prop: "accountPurpose", minWidth: 120,slot:true },
    { label: "币种", prop: "currency", minWidth: 120 },
    { label: "账户类型", prop: "accountType", minWidth: 120},
    { label: "账户标识", prop: "accountLabel", minWidth: 120 },
    { label: "存款类型", prop: "depositType", minWidth: 120 },
    { label: "直连开通", prop: "directOpen", minWidth: 120 },
    { label: "销户日期", prop: "closeDate", minWidth: 120 },
];


const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

/**
 * 查询银行列表
 *
 */
const bankAccountList = ref([]);
const getBankList = () => {
    companyApi.getBankList().then(res=>{
        if(res.code === '200'){
            bankAccountList.value = res.data;
        }
    });
}

/**
 * 跳转银行余额页面
 */
const router = useRouter();
const toPage = () => {
    router.push({path:`/businessFinance/bankManagement/bankInformation/bankBalance2`});
}

const visible = ref(false);
const accountPurposeForm = reactive({
    bankAccountId:'',
    accountPurpose:'',
});

const rules = reactive({
    accountPurpose: [
        { required: true, message: '请输入账户用途', trigger: 'blur' }
    ],
});

/**
 * 账户用途
 */
const accountPurposeClick = (row) => {
    accountPurposeForm.bankAccountId = row.bankAccountId;
    accountPurposeForm.accountPurpose = row.accountPurpose;
    visible.value = true;
}

const formRef = ref(null);
const isLoading = ref(false);

/**
 * 编辑用途
 */
const onConfirm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            isLoading.value = true;
            CBS.updateAccountPurpose(accountPurposeForm).then(res=>{
                if(res.code === '200'){
                    ElMessage.success('操作成功!');
                    visible.value = false;
                    isLoading.value = false;
                    onQuery();
                }else{
                    ElMessage.error(res.msg);
                    visible.value = false;
                    isLoading.value = false;
                }
            });
        }
    });
}

const importFilePopupRef = ref(null);
/**
 * 导入
 */
const onImport = () => {
    importFilePopupRef.value.openPopup();
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:50
    });
    // getCompanyList();
    // getBankList();
});
</script>

<style lang="scss" scoped>
.el-form-item{
  width: 100% !important;
}
.bankingInformationPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
